{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import split with context %}

{% extends "base-protocol-mozilla.html" %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('protocol-newsletter') }}
  {{ css_bundle('contribute') }}
{% endblock %}

{% block page_title %}{{ ftl('contribute-page-title') }}{% endblock %}

{% block body_class %}{{ super() }} contribute{% endblock %}

{% set utm_params = '?utm_source=mozilla.org-contribute&utm_medium=referral&utm_campaign=contribute-page' %}

{% block content %}
<main>
  <div class="mzp-l-content contribute-intro">
    <header class="contribute-intro-content">
      <h1 class="contribute-intro-heading">{{ ftl('contribute-page-heading') }}</h1>
      <p>{{ ftl('contribute-page-intro') }}</p>
    </header>

    <div class="contribute-intro-media-wrapper">
      <div class="contribute-intro-media">
        <img src="{{ static('img/contribute/contribute-hero-composition.jpg') }}" alt="">
      </div>
    </div>
  </div>

  <section class="mzp-l-content contribute-hero">
    <h2 class="mzp-c-section-heading">{{ ftl('contribute-how-heading') }}</h2>
    <div class="mzp-l-card-quarter contribute-card-container">
      <section class="mzp-c-card contribute-card">
        <a class="mzp-c-card-block-link contribute-card-wrapper" href="https://pontoon.mozilla.org/{{ utm_params }}">
          <div class="mzp-c-card-media-wrapper">
            {{ picture(
              url='img/contribute/contribute-card-translate-lg.png',
              sources=[
                {
                  'media': '(max-width: 480px)',
                  'srcset': {
                    'img/contribute/contribute-card-translate.png': 'default'
                  }
                }
              ],
              optional_attributes={
                'class': 'mzp-c-card-image'
              }
            ) }}
          </div>
          <div class="mzp-c-card-content contribute-card-content">
            <div class="contribute-card-content-tags">
              <div class="mzp-c-card-tag contribute-card-tag-bold">{{ ftl('contribute-tag-non-technical') }}</div>
              <div class="mzp-c-card-tag">{{ ftl('contribute-tag-individual-event') }}</div>
            </div>
            <h2 class="mzp-c-card-title">{{ ftl('contribute-task-translate-heading') }}</h2>
            <p class="mzp-c-card-desc">{{ ftl('contribute-task-translate-desc') }}</p>
          </div>
        </a>
      </section>

      <section class="mzp-c-card contribute-card">
        <a class="mzp-c-card-block-link contribute-card-wrapper" href="https://firefox-source-docs.mozilla.org/contributing/contributing_to_mozilla.html{{ utm_params }}">
          <div class="mzp-c-card-media-wrapper">
            {{ picture(
              url='img/contribute/contribute-card-contribute-lg.png',
              sources=[
                {
                  'media': '(max-width: 480px)',
                  'srcset': {
                    'img/contribute/contribute-card-contribute.png': 'default'
                  }
                }
              ],
              optional_attributes={
                'class': 'mzp-c-card-image'
              }
            ) }}
          </div>
          <div class="mzp-c-card-content contribute-card-content">
            <div class="contribute-card-content-tags">
              <div class="mzp-c-card-tag contribute-card-tag-bold">{{ ftl('contribute-tag-technical') }}</div>
              <div class="mzp-c-card-tag">{{ ftl('contribute-tag-individual') }}</div>
            </div>
            <h2 class="mzp-c-card-title">{{ ftl('contribute-task-mozilla-codebase-heading') }}</h2>
            <p class="mzp-c-card-desc">{{ ftl('contribute-task-mozilla-codebase-desc') }}</p>
          </div>
        </a>
      </section>

      <section class="mzp-c-card contribute-card">
        <a class="mzp-c-card-block-link contribute-card-wrapper" href="https://community.mozilla.org/activities/answer-support-questions/{{ utm_params }}">
          <div class="mzp-c-card-media-wrapper">
            {{ picture(
              url='img/contribute/contribute-card-support-lg.png',
              sources=[
                {
                  'media': '(max-width: 480px)',
                  'srcset': {
                    'img/contribute/contribute-card-support.png': 'default'
                  }
                }
              ],
              optional_attributes={
                'class': 'mzp-c-card-image'
              }
            ) }}
          </div>
          <div class="mzp-c-card-content contribute-card-content">
            <div class="contribute-card-content-tags">
              <div class="mzp-c-card-tag contribute-card-tag-bold">{{ ftl('contribute-tag-support') }}</div>
              <div class="mzp-c-card-tag">{{ ftl('contribute-tag-individual-event') }}</div>
            </div>
            <h2 class="mzp-c-card-title">{{ ftl('contribute-tag-individual-event') }}</h2>
            <p class="mzp-c-card-desc">{{ ftl('contribute-task-support-desc') }}</p>
          </div>
        </a>
      </section>

      <section class="mzp-c-card contribute-card">
        <a class="mzp-c-card-block-link contribute-card-wrapper" href="https://community.mozilla.org/{{ utm_params }}">
          <div class="mzp-c-card-media-wrapper">
            {{ picture(
              url='img/contribute/contribute-card-community-lg.png',
              sources=[
                {
                  'media': '(max-width: 480px)',
                  'srcset': {
                    'img/contribute/contribute-card-community.png': 'default'
                  }
                }
              ],
              optional_attributes={
                'class': 'mzp-c-card-image'
              }
            ) }}
          </div>
          <div class="mzp-c-card-content contribute-card-content">
            <div class="contribute-card-content-tags">
              <div class="mzp-c-card-tag contribute-card-tag-bold">{{ ftl('contribute-tag-technical-non-technical') }}</div>
            </div>

            <h2 class="mzp-c-card-title">{{ ftl('contribute-task-join-heading') }}</h2>
            <p class="mzp-c-card-desc">{{ ftl('contribute-task-join-desc') }}</p>
          </div>
        </a>
      </section>
    </div>
  </section>

  <section class="mzp-l-content">
    <div class="contribute-mission">
      <div class="contribute-mission-intro">
        <h2 class="contribute-mission-title">{{ ftl('contribute-mission-heading') }}</h2>
        <p>{{ ftl('contribute-mission-desc') }}</p>
      </div>

      <ul class="contribute-mission-cards">
        <li class="contribute-mission-card">
          <a href="{{ url('mozorg.about.index') }}">
            <h3 class="contribute-mission-learn-icon">{{ ftl('contribute-learn') }}</h3>
            <p>{{ ftl('contribute-read-manifesto') }}</p>
          </a>
        </li>

        <li class="contribute-mission-card">
          <a href="https://community.mozilla.org/events/{{ utm_params }}">
            <h3 class="contribute-mission-event-icon">{{ ftl('contribute-find-event') }}</h3>
            <p>{{ ftl('contribute-meet-volunteers') }}</p>
          </a>
        </li>

        <li class="contribute-mission-card">
          <a href="{{ donate_url(location='contribute') }}">
            <h3 class="contribute-mission-donate-icon">{{ ftl('contribute-donate') }}</h3>
            <p>{{ ftl('contribute-help-fund') }}</p>
          </a>
        </li>

        <li class="contribute-mission-card">
          <a href="https://bsky.app/profile/mozilla.org">
            <h3 class="contribute-mission-follow-icon">{{ ftl('contribute-follow-mozilla') }}</h3>
            <p>{{ ftl('contribute-opportunities') }}</p>
          </a>
        </li>
      </ul>
    </div>
  </section>

  {% call split(
    image=resp_img(
      url='img/contribute/contribute-madeby-feature.jpg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset'
      }
    ),
    media_after=False,
    media_class='mzp-l-split-h-center',
    block_class='mzp-t-split-nospace'
    ) %}
      <h2>{{ ftl('contribute-made-by-heading') }}</h2>
      <p>{{ ftl('contribute-made-by-desc') }}</p>
      <p>{{ ftl('contribute-made-by-desc-cont') }}</p>
    {% endcall %}

  <aside class="mzp-l-content">
    <div class="mzp-c-newsletter">
      <div class="mzp-c-newsletter-image">
        {{ resp_img(
          url='img/contribute/newsletter.png',
          srcset={
            'img/contribute/newsletter-high-res.png': '2x'
          }
        ) }}
      </div>

      <div class="newsletter-content">
        {{ email_newsletter_form(
          title=ftl('contribute-newsletter-heading'),
          subtitle=ftl('contribute-newsletter-sub-heading'),
          desc=ftl('contribute-newsletter-desc'),
          newsletters='about-mozilla',
          include_language=False)
        }}
      </div>
    </div>
  </aside>

  <section class="contribute-banner-wrapper">
    <div class="contribute-banner contribute-banner-gethelp">
      <div class="contribute-banner-content">
        <h2 class="contribute-banner-gethelp-title">{{ ftl('contribute-support-heading') }}</h2>
        <p>{{ ftl('contribute-support-desc') }}</p>
      </div>
      <div class="contribute-banner-cta">
        <a href="https://support.mozilla.org/{{ utm_params }}" class="mzp-c-button mzp-t-product">
          {{ ftl('contribute-mozilla-support')}}
        </a>
      </div>
    </div>

    <div class="contribute-banner contribute-banner-problems">
      <div class="contribute-banner-content">
        <div class="contribute-banner-problems-title-wrapper">
          <h2 class="contribute-banner-problems-title"><span>{{ ftl('contribute-web-compat-heading') }}</span></h2>
        </div>
        <p>{{ ftl('contribute-web-compat-desc') }}</p>
      </div>
      <div class="contribute-banner-cta">
        <a href="https://webcompat.com/{{ utm_params }}" class="mzp-c-button">
          {{ ftl('contribute-report-issue') }}
        </a>
      </div>
    </div>
  </section>

</main>
{% endblock content %}

{% block js %}
  {{ js_bundle('newsletter') }}
{% endblock %}
